﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>演示</title>
    <link rel="stylesheet" href="assets/iview/styles/main.css">
    <link rel="stylesheet" href="assets/css/preview.css">
</head>

<body>
<div id="app" class="wrapper">
    <div id="imageArea" class="m-center">
        <img id="image" src="assets/images/logo.png"/>
    </div>
    <div id="verseArea">
        <h1 id="title" onclick="scrollHandler(1)"></h1>
        <article id="mainContent"></article>
    </div>
</div>
<script type="text/javascript">
    var timer = null;
    var titleHeight = 73;
    var app = null;
    var fontSize=4;

    function resizeHandler() {
        var scale = document.body.offsetWidth / window.screen.availWidth;
        document.body.style.WebkitTransform = "scale(" + scale + ")";
        var appHeight = document.getElementById("app").offsetHeight;
        document.getElementById("mainContent").style["height"] = appHeight - titleHeight - 8 + "px";
    }
    function playVerseHandler(title, verses) {
        document.getElementById("mainContent").scrollTop = 0;
        document.getElementById("imageArea").style.display = "none";
        document.getElementById("verseArea").style.display = "block";
        document.getElementById("title").innerHTML = title;
        document.getElementById("mainContent").innerHTML = verses;
    }
    function playImageHandler(img) {
        document.getElementById("imageArea").style["display"] = "block";
        document.getElementById("verseArea").style["display"] = "none";
        switch (img) {
            case "关机":
                img = "assets/images/gj.png";
                break;
            case "圣餐":
                //0-9之间随机数
                var rd = Math.floor(Math.random() * 10);
                img = "assets/images/sc" + rd + ".png";
                break;
            default:
                img = "assets/images/sj.png";
                break;
        }
        document.getElementById("image").src = img;
    }
    function fontResizeHandler(size) {
        var hs=document.getElementsByTagName("h3");
        fontSize+=size;
        for(var i=0,j=hs.length;i<j;i++){
            hs[i].style["font-size"]=fontSize+"em";
        }
    }
    function scrollWindow() {
        var scrollTop=document.getElementById("mainContent").scrollTop;
        var isBottom = scrollTop > document.getElementById("mainContent").scrollHeight;
        if (isBottom) {
            clearInterval(timer);
            document.getElementById("mainContent").scrollTop = 0;
        } else {
            document.getElementById("mainContent").scrollTop = scrollTop+1;
        }
    }
    function scrollHandler(isScroll) {
        clearInterval(timer);
        if (isScroll) {
            timer = setInterval("scrollWindow()", 100);
        } 
    }
    function init() {
        var gui = require('nw.gui');
        var subWin = gui.Window.get();
        subWin.playVerse = playVerseHandler;
        subWin.playImage = playImageHandler;
        subWin.autoScroll = scrollHandler;
        subWin.fontSize=fontResizeHandler;
    }
    (function () {
        init();
        resizeHandler();
        window.onresize = resizeHandler;

    })();
</script>
</body>

</html>